<template>
<van-dialog style="padding:30px 40px 0px 40px" v-model:show="show" show-cancel-button show-confirm-button
            @confirm="()=>{
              setSetting({
                ...setting.value,
                ...settings
              }).then(d=>{
                ret.showRetMessage(d);
                if(d.data.code!=-1){
                  setting.loadSetting();
                  new message('某些设置需重启生效')
                }
              })
            }"
  >
  <van-cell-group>

    <el-form label-width="30%">
      <el-form-item label="最大帧率:">
        <template #default>
          <van-slider v-model="settings.maxFpx">
            <template #button>
              <div class="custom-button">{{ settings.maxFpx }}</div>
            </template>
          </van-slider>
        </template>
      </el-form-item>

      <el-form-item label="字体大小:">
        <template #default>
          <van-slider :max="50" v-model="settings.fontSize">
            <template #button>
              <div class="custom-button">{{ settings.fontSize }}</div>
            </template>
          </van-slider>
        </template>
      </el-form-item>
      <el-form-item label="是否发音:">
        <template #default>
          <el-checkbox>发音</el-checkbox>
        </template>
      </el-form-item>
    </el-form>
  </van-cell-group>
</van-dialog>
</template>
<script setup>
import {ref,defineExpose,onMounted} from 'vue';
import setting from "@/setting";
import {setSetting} from "@/apis/apis";
import ret from "@/utils/ret";
import message from "@/pages/wordPage/src/objs/message"
let show =ref(false)
let settings=ref({
  maxFpx:setting.value.maxFpx,
  fontSize:setting.value.fontSize
})
onMounted(()=>{

})
defineExpose({
  apply:function (){
    show.value=true;
    setting.loadSetting();
  }
})
</script>
<style scoped>

</style>